<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- 表单内按钮的点击事件默认行为是提交表单刷新页面 -->
			<!-- @submit.prevent="doSome" 阻止事件默认行为-->
			<form  @submit.prevent="doSome">
				<!-- v-model收集的是value值，用户输入的就是value值 -->
				账号：<input type="text" v-model="loginInfo.username"></br></br>
				密码：<input type="text" v-model="loginInfo.password"></br></br>
				性别：
				<!-- v-model收集的是value值，且要给标签配置value值 -->
				<input type="radio" v-model="loginInfo.sex" value = "男">男
				<input type="radio" v-model="loginInfo.sex" value = "女">女</br></br>
				爱好：
				<!-- 配置input的value属性 v-model的初始值是数组，那么收集的的就是value组成的数组 -->
				<input type="checkbox" v-model="loginInfo.hobby" value = "1">看书
				<input type="checkbox" v-model="loginInfo.hobby" value = "2">写字
				<input type="checkbox" v-model="loginInfo.hobby" value = "3">画画</br></br>
				所属校区：
				<!-- 需要给选项配置value值 -->
				<select v-model="loginInfo.area">
					<option value="">请选择所属校区</option>
					<option value="a">A区</option>
					<option value="b">B区</option>
					<option value="c">C区</option>
				</select></br></br>
				其他信息：
				<textarea v-model="loginInfo.remark"></textarea></br></br>
				<!-- 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） -->
				<input type="checkbox" v-model="loginInfo.isAgree">阅读并接收<a href="www.baidu.com">《用户协议》</a></br></br>
				<button>提交</button>
			</form>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					loginInfo: {
						username: '',
						password: '',
						sex: '',
						hobby: [],
						remark:'',
						area: '',
						isAgree: ''
					}
				},
				methods: {
					doSome(){
						console.log('提交',this.loginInfo)
					}
				}
			})
		</script>
	</body>
</html>